.study__members {
  @extend %study-list;

  .left {
    @extend %flex-center-nowrap;

    align-items: stretch;
    flex: 0 1 auto;
    overflow: hidden;
  }

  .user-link {
    @extend %ellipsis;

    margin: 0.5em 0;
  }

  .status {
    @extend %flex-center;

    justify-content: center;
    width: 2.4em;
    margin-right: 0.1em;
    transition: 2.5s;
  }

  i {
    font-size: 1.2em;
    opacity: 0.5;
    transition: 2.5s;
  }

  .contrib i {
    opacity: 0.7;
  }

  .online i {
    opacity: 0.8;
    color: $c-good;
  }

  .online.contrib i {
    opacity: 1;
  }

  > div:nth-child(4n-3) .status.active {
    background: #42a5f5;
  }

  > div:nth-child(4n-2) .status.active {
    background: #f44336;
  }

  > div:nth-child(4n-1) .status.active {
    background: #fdd835;
  }

  > div:nth-child(4n-0) .status.active {
    background: #4caf50;
  }

  .status.active {
    transition: none;

    i {
      transition: none;
      opacity: 1;
      color: #fff;
    }
  }

  .leave {
    color: $c-bad;
    opacity: 0.7;
  }

  > div:hover .leave:hover {
    background-color: $c-bad;
  }

  .add {
    @extend %roboto;

    &:hover i {
      color: $c-link;
      opacity: 1;
      transition: none;
    }
  }

  .admin {
    text-align: center;

    button {
      margin-bottom: 0.5em;
    }
  }

  m-config,
  .editing {
    background: mix($c-accent, $c-bg-box, 10%) !important;
  }

  m-config {
    @extend %flex-between;

    padding: 0.4em 0.8em 1em 0.8em;

    .role {
      @extend %flex-center;

      label {
        cursor: pointer;
      }
    }

    .switch {
      margin-right: 0.5em;
    }
  }
}
